<template>
	<view class="user">
		<view class="head">
			<view class="my">
				<image src="../../static/images/base_avatar.png" mode=""></image>
				<span class="name"> 南烟</span>
				<span class='myself' @click="geren()">  个人中心>  </span>
			</view>
			<view class="number">
				<view class="left">
					<p class="">0</p>
					<p class="">今日拼购次数</p>
				</view>
				<view class="right">
					<p class="">0</p>
					<p class="">今日拼中次数</p>
				</view>
			</view>
		</view>
		
		<!-- 订单 -->
		<view class="order">
			<view class="orer-p">
				<span class="span1">我的订单</span>
				<span class="span2" @click="dingdan()"> 全部> </span>
			</view>
			<view class="order-boxs" v-for="(item,index) in order" :key="index" >
				<image class="img" :src="item.image" ></image>
				<view class="title">{{ item.name }}</view>
			</view>
		</view>
		
		<!-- 金刚区 -->
		<view class="grid-box " 　 >
			<view class="grid-boxs" v-for="(item,index) in gird" :key="index" >
        <navigator :url="item.path">
				<image class="tool-img" :src="item.image" mode="aspectFill"></image>
				<view class="item-title">{{ item.name }}</view>
        </navigator>
			</view> 
			
		</view>
	</view>
	
</template>

<script></script>
<style></style>


<script>
	export default {
		components: {},
		data() {
			return {
				order:[
					{
						name: "待发货", //菜单名字
						image: "../../static/images/newUser/nosend.png"
					},
					{
						name: "待收货", //菜单名字
						image: "../../static/images/newUser/noget.png"
					},
					{
						name: "已确认", //菜单名字
						image: "../../static/images/newUser/finish.png"
					},
				],
				gird: [{
					path: "/pages/user/menu/wallet", //跳转路径
					name: "钱包", //菜单名字
					image: "../../static/images/newUser/wallet.png" //菜单图片
				},{
					path: "/pages/user/menu/integral", //跳转路径
					name: "积分", //菜单名字
					image: "../../static/images/newUser/score.png" //菜单图片
				},{
					path: "/pages/user/menu/withdraw", //跳转路径
					name: "提现", //菜单名字
					image: "../../static/images/newUser/cash.png" //菜单图片
				},{
					path: "/pages/user/menu/my-groupon", //跳转路径
					name: "我的拼团", //菜单名字
					image: "../../static/images/newUser/groupon.png" //菜单图片
				},{
					path: "/pages/user/menu/name", //跳转路径
					name: "实名认证", //菜单名字
					image: "../../static/images/newUser/real.png" //菜单图片
				},{
					path: "/pages/user/menu/collection", //跳转路径
					name: "收藏商品", //菜单名字
					image: "../../static/images/newUser/favorite.png" //菜单图片
				},{
					path: "/pages/user/menu/invite", //跳转路径
					name: "邀请好友", //菜单名字
					image: "../../static/images/newUser/invite.png" //菜单图片
				},{
					path: "/pages/user/menu/friend", //跳转路径
					name: "我的好友", //菜单名字
					image: "../../static/images/newUser/team.png" //菜单图片
				},{
					path: "/pages/user/menu/address", //跳转路径
					name: "收货地址", //菜单名字
					image: "../../static/images/newUser/address.png" //菜单图片
				},{
					path: "/pages/user/menu/help", //跳转路径
					name: "帮助中心", //菜单名字
					image: "../../static/images/newUser/help.png" //菜单图片
				},{
					path: "/pages/user/menu/set", //跳转路径
					name: "设置", //菜单名字
					image: "../../static/images/newUser/set.png" //菜单图片
				},],
			};
		},
		computed: {},
		props: {
			list: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},
		methods: {
			jump(data) {
				if(data.path=='/invite'){
					this.$emit('onShare');
				}else{
					this.$tools.routerTo(data.path);
				}
			},
			dingdan() {       
				uni.navigateTo({
					url: './order'
				})
			},
			geren() {
				uni.navigateTo({
					url: './Personal_center'
				})
			}
		}
	};
</script>

<style lang="scss">
	.user{
		width: 100%;
		background-color: #F7F7F7;
		height: 1550rpx;
	}
	// 头部
	.head{
		padding:80rpx 30rpx;
		 background-image: linear-gradient(to right, #F67341 ,#FFA854 );
		 .my{
			 color: white;
			 overflow: hidden;
			 image{
				  vertical-align: middle;
				 width: 100rpx;
				 height: 100rpx;
			 }
			 .name{
				 margin-left:50rpx;
			 }
			 .myself{
				 float: right;
				 margin-top:20rpx;
			 }
		 }
		.number{
			width: 100%;
			margin-top:30rpx;
			overflow: hidden;
			color: white;
			p{
				text-align: center;
				margin-top:20rpx;
			}
			.left{
				width: 50%;
				text-align: center;
				float: left;
			}
			.left{
				width: 50%;
				text-align: center;
				float: right;
			}
		}
	}
	
	
	// 订单
	.order{
		width: 660rpx;
		border-radius: 15rpx;
		position: relative;
		// border:1px solid red;
		overflow: hidden;
		top: -30rpx;
		left: 15rpx;
		background-color: white;
		padding:20rpx 30rpx;
		.orer-p{
			overflow: hidden;
			.span1{
				float: left;
			}
			.span2{
				float: right;
			}
		}
		.order-boxs{
			width:33%;
			text-align: center;
			float: left;
			margin-top:40rpx;
			.img {
				width: 44rpx;
				height: 44rpx;
			}
			.title {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 24rpx;
				padding-top: 10rpx;
			}
		}
	}
	
	
	// 金刚区
	.grid-box {
		margin-top:30rpx;
		padding-bottom: 20rpx;
		// padding:30rpx 15rpx;
		position: relative;
		// border:1px solid red;
		overflow: hidden;
		top: -30rpx;
		left: 15rpx;
		width: 720rpx;
		background: #fff;
		// display: flex;
		// flex-wrap: wrap;
		.grid-boxs{
			width:25%;
			text-align: center;
			float: left;
			margin-top:40rpx;
			.tool-img {
				width: 44rpx;
				height: 44rpx;
			}
			.item-title {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 24rpx;
				padding-top: 20rpx;
			}
		}
		
	}
</style>

